<template>
  <div class="Photography">
    <!-- 按钮表头 -->
    <div class="title">
      <el-button type="primary" class="title-btn" @click="openDialog">上传</el-button>
    </div>
    <ul class="infinite-list"  style="overflow: auto">
      <li v-for="item in imgList" :key="item.name" class="infinite-list-item">
        <el-image class="imgItem" :src="'data:image/png;base64,' + item" alt="" :preview-src-list="previewList"></el-image>
      </li>
    </ul>
    <el-dialog :visible.sync="dialogVisible">
      <el-select v-model="uploadData.classification">
        <el-option v-for=" (item,index) of classificationList"  :key="index" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-upload
        style="margin-top:10px"
        class="upload-demo"
        ref="upload"
        drag
        :action="url"
        :headers="headers"
        :data="uploadData"
        :on-progress="onProgress"
        :on-success='onSuccess'
        :auto-upload="false"
        :before-upload="handleBeforeUpload"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';
const ACCEPT_TYPE ='.jpg,.jpeg,.png,.gif,';

export default {
  name: 'Photography',
  data () {
    return {
      imgList: [],
      previewList:[],//大图预览
      dialogVisible:false,
      uploadData:{
        username:'',
        classification:'2',
      },
      classificationList:[
        {label:'头像',value:'1'},
        {label:'摄影',value:'2'},
        {label:'其他',value:'3'},
      ],
      url:'http://192.168.1.107:8000/api/uploadImage',
      headers:{
        'Content-Type':'',
      }
    }
  },
  methods: {
    load () {
      this.$axios.post('/pictureShows', {
        classification: '2'
      }).then(({data}) => {
        if (data.code === 200) {
          // for(let i = 0;i<=100;i++){
          //   this.imgList.push( data.data[1] );
          //   this.previewList.push( `data:image/png;base64,${data.data[1]}` );
          // }
          this.imgList = data.data;
        } else {
          this.$alert(data.errorMessage, '提示', {
            confirmButtonText: '确定'
          })
        }
      })
    },
    openDialog(){
      this.dialogVisible = true;
    },
    handleUpload(){
      this.uploadData.username = this.userInfo.username;
      this.$refs.upload.submit();
    },
    onProgress(file){
    },
    onSuccess(response, file, fileList){
    },
    // 上传前校验
    handleBeforeUpload(file){
      let valid = this.validateFileType(file.name);
        if (!valid) {
          this.$message({
            type: 'warning',
            message: '只能上传图片！',
          });
          return false;
        }
      this.headers['Content-Type'] = file.type;
      this.headers.contentType =  file.type;
    },
    /**
     * 校验文件类型是否合法
     * @param {*} val
     */
    validateFileType(val) {
      let suffix = val.substring(val.lastIndexOf('.') + 1).toLocaleLowerCase();
      return ACCEPT_TYPE.includes(suffix);
    },
  },
  mounted(){
    this.load();
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapGetters(['userInfo'])
  },
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.Photography {
  height: 100%;
  margin-top:30px;
}
.infinite-list {
  height: 800px;
}
.infinite-list-item {
  list-style-type: none;
  display: grid;
  float: left;
  /* padding: 0px 20px 0px 0px; */
  margin:10px
}
.imgItem {
  height: 208px;
  /* width: 200px; */
  border-radius: 30px;
}
.title{
  display: flex;
  flex-direction: row-reverse
}
</style>
